<template>
	<view>
		<view class="user_info">
			<view class="user_ava" v-if="isLogin" style="padding: 10rpx 40rpx 40rpx 20rpx;">
				<view class="user">
					<!-- @click="toSetting" -->
					<button  class="avatar-wrapper"  open-type='chooseAvatar' @chooseavatar="onChooseAvatar"  >
						<image :src="userInfo.avatar" mode=""></image>
					</button>
					<view class="user_title" style="padding-bottom: 15rpx;">
						<view class="name" style="padding-bottom: 5rpx;">{{userInfo.name}}</view>
						<view class="level">普通会员</view>
					</view>
				</view>
				<view class="settings">
					<!-- <u-icon name="scan" color="#fff" size="52rpx"></u-icon> -->
					<text style="width: 20rpx"></text>
					<u-icon @click="toSetting" name="setting" color="#fff" size="45rpx"></u-icon>
				</view>
			</view>
			<view class="user_ava" v-else style="padding-left: 40rpx;">
				
				<view class="user" @click="toLogin">
					<view class="user_image" >
						<image src="../../static/image/user.png" mode=""></image>
					</view>
					<view class="user_title">
						<view class="name">立即登录</view>
						<view class="name" style="font-size: 24rpx;">登录体验更多功能</view>
					</view>
					<!-- <view class="user-info-box2">
						<view class="tj-sction">
							<view class="tj-item">
								<text class="num">128.8</text>
								<text>余额</text>
							</view>
							<view class="tj-item" >
								<text class="num">20</text>
								<text>积分</text>
							</view>
							<view class="tj-item">
								<text class="num">0</text>
								<text>优惠券</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<!-- <view class="wallet">
				<view class="balance">
					<view>0</view>
					<view>余额</view>
				</view>
				<view>
					<u-line direction="col" color="#ffffff"></u-line>
				</view>
				<view class="balance">
					<view>0</view>
					<view>积分</view>
				</view>
				<view>
					<u-line direction="col" color="#ffffff"></u-line>
				</view>
				<view class="balance">
					<view>0</view>
					<view>优惠券</view>
				</view>
			</view> -->
		</view>

		<view class="order">
			<view class="all_order">
				<view>全部订单</view>
				<view class="to_order" @click="goToOrder(0)">
					<text style="margin-right: 20rpx">查看全部订单</text>

					<u-icon name="arrow-right" size="22rpx"></u-icon>
				</view>
			</view>
			<view style="margin: 30rpx 0">
				<u-line></u-line>
			</view>
			<view class="order_class">
				<view
					class="class_item"
					v-for="(item, index) in orderClass"
					:key="index"
					@click="goToOrder(index+1)"
				>
					<u-icon :name="item.icon" size="70rpx"></u-icon>
					<view>{{ item.name }}</view>
				</view>
				<u-badge
					v-if="isLogin && totalAmount > 0"
					type="primary"
					max="999" 
					:value="totalAmount"
					absolute
					:offset="[0, 560]"
				
				></u-badge>
			</view>
		</view>

		<view class="tool">
			<view class="">常用工具</view>
			<view style="margin: 30rpx 0">
				<u-line></u-line>
			</view>
			<view v-for="(item,index) in indexList" :key="index">
				<view class="tool_item" @tap="goToPage(item)">
					<view class="item_left">
						<view  class="icon">
							<u--image  :src="item.src" width="60rpx" height="60rpx" ></u--image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="margin: 30rpx 0" v-if="index!==indexList.length-1">
					<u-line></u-line>
				</view>
			</view>
		<!-- 	<view >
				<view class="tool_item" @tap="goTokf(item)">
					<view class="item_left">
						<view  class="icon">
							<u--image  src="/static/image/shouhuodizhi.png" width="60rpx" height="60rpx" ></u--image>
						</view>
						<view class="name">联系客服</view>
					</view>
					<view class="">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="margin: 30rpx 0" v-if="index!==indexList.length-1">
					<u-line></u-line>
				</view>
			</view> -->
			
		</view>
		<!-- <button open-type="contact">联系客服</button> -->
		<view style="width: 100vw;text-align: center;margin: 50rpx auto;">
			<image src="@/static/logo.png" mode="" style="width: 185rpx;height: 75rpx;"></image>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
import { getUserInfo , updateUserInfo , getkefe } from '@/api/user.js'
import { orderList , wechatpay } from '@/api/order.js'
export default {
	data() {
		return {
			isLogin:false,
			orderClass: [
				{ name: '待付款', icon: 'bag' },
				{ name: '待发货', icon: 'car' },
				{ name: '待收货', icon: 'gift' },
				{ name: '退款', icon: 'red-packet' }
			],
			totalAmount:0,
			indexList: [
				{
					src: '/static/image/shouhuodizhi.png',
					url:'/userPage/addrPath/addrPathList',
					name: '收货地址'
				},
				{
					src: '/static/image/kefu.png',
					url:'/userPage/customer/customer',
					name: '联系客服'
				},
				// {
				// 	src: '/static/image/youhuiquan.png',
				// 	url:'/userPage/coupon/coupon',
				// 	name: '优惠券'
				// }
			],
			userInfo:{},
			urls:''
		};
	},
	onShareAppMessage() {
			return {
			  title: '掌讯达商城',
			  path: '/pages/index/index',
			  // imageUrl: this.goodsInfo.image[0]  // 分享显示的图片
			};
	 },
	 onShareTimeline() {
	   return {
	     title: '掌讯达商城',
	     // query: 'key=value' // 可选 参数
	   }
	 },
	onShow(){
		getkefe().then(res => {
		  this.urls = res.data.mini_program_link;
		  // 在获取到 this.url 后再调用 wx.openCustomerServiceChat()
		  // this.openCustomerServiceChat();
		}).catch(err => {
		  console.error('Failed to fetch kefe:', err);
		});
		if(uni.getStorageSync('userInfo')){
			this.userInfo = uni.getStorageSync('userInfo') 
			this.isLogin = true
			orderList({
				page: 1,
				per_page: 10,
				status:'0'
			}).then(res => {
				this.totalAmount = res.data.total
			})
		}else{
			this.isLogin = false
		}
	},
	methods: {
		onChooseAvatar(e){
			const avatarUrl = e.detail.avatarUrl
			uni.uploadFile({
					url: 'https://iot.wehcatapp.zhongtuodianshang.cn/api/v1/images',
					filePath: avatarUrl,
					name: 'image',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
                        // 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
							this.userInfo.avatar = data.data.path;
								updateUserInfo({avatar:this.userInfo.avatar}).then(res => {
									if(res.status == 200){
										uni.setStorageSync('userInfo',res.data)
									}
								})
					},
					fail: (error) => {
						console.log('error',error)
						uni.showToast({
							title: '失败',
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
		},
		goToPage(item){
			if(this.isLogin){
				if(item.name == '联系客服'){
					if (this.urls) {
					  wx.openCustomerServiceChat({
					    extInfo: { url: this.urls },
					    corpId: 'ww1548cec1dab0bf55',
					    success(res) {
							console.log('success',res)
						},
						fail(err) {
							console.log('err',err)
						}
					  });
					}
				}else{
					uni.navigateTo({
						url:item.url
					})
				}
				
			}else{
				this.loginModal()
			}
		},
		toSetting() {
			uni.navigateTo({
				url:'../userInfo/userInfo'
			})
		},
		goToOrder(index){
			if(this.isLogin){
				if(index == 4){
					uni.navigateTo({
						url:'/orderPage/index/index?status=5'
					})
				}else{
					uni.navigateTo({
						url:`/orderPage/index/index?status=${index}`
					})
				}
				
			}else{
				this.loginModal()
			}
			
		},
		toLogin(){
			this.loginModal()
		}
	},
};
</script>

<style lang="scss">
	.tool{
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		.tool_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item_left{
				display: flex;
				align-items: center;
				
				.name{
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
		}
	}
.order {
	padding: 30rpx;
	background-color: #fff;
	.order_class {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.class_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			font-size: 26rpx;
		}
	}
	.all_order {
		display: flex;
		justify-content: space-between;
		.to_order {
			display: flex;
			align-items: center;
			color: #888;
			font-size: 26rpx;
		}
	}
}
.user_info {
	background-color: #2571cd;
	height: 220rpx;
	.wallet {
		font-size: 28rpx;
		display: flex;
		justify-content: space-around;
		// border: 1px solid red;
		margin-top: 20rpx;
		.balance {
			color: #fff;
			text-align: center;
			width: 350rpx;
		}
	}
	.user_ava {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 0 40rpx;
		height: 200rpx;
		.user {
			display: flex;
			// min-width: 450rpx;
			button::after{
				border: none !important;
			}
			.avatar-wrapper{
				display: block;
				background: #2571cd;
				color: #2571cd;
				// margin-right: 30rpx;
				image{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					border: 6rpx solid #fff;
				}
			}
			.user_image {
				margin-right: 30rpx;
				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					border: 6rpx solid #fff;
				}
			}
			.user_title {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name {
					color: #fff;
				}
				.level {
					margin-bottom: 8rpx;
					max-width: 5em;
					text-align: center;
					background-color: #00000088;
					border-radius: 20rpx;
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					color: #e7e525;
				}
			}
		}
		.settings {
			display: flex;
		}
	}
}
// .user-info-box2{
// 	width: 100%;
// 	height: 180rpx;
// 	z-index: 9999;
// 	/* background-color: #000; */
// }
// .tj-sction{
// 	background: #4586d4;
// 	// @extend %section;
// 	.tj-item{
// 		// @extend %flex-center;
// 		flex-direction: column;
// 		height: 140rpx;
// 		// font-size: $font-sm;
// 		color: #fff;
// 	}
// 	.num{
// 		// font-size: $font-lg;
// 		color: #fff;
// 		margin-bottom: 8rpx;
// 	}
// }
</style>
